<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>5月抽疯季</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .hidden {
      display: none !important;
    }
    html {
      font-size: 14px;
      color: white;
    }
    body {
      background: url('img/title.png') no-repeat;
      background-size: 100% auto;
      background-color: #2B97CF;
      padding-bottom: 20px;
    }
    .desc {
      text-align: center;
      margin-top: 50vw;
    }
    .part1 {
      width: 100%;
      box-sizing: border-box;
      border-image: url('img/frame1.png') 158 79 27 79;
      border-top: 21.07vw solid;
      border-right: 10.53vw solid;
      border-bottom: 3.6vw solid;
      border-left: 10.53vw solid;
      margin-top: 10px;
      padding: 5px;
      white-space: nowrap;
    }
    .part1 > div {
      display: inline-block;
      width: 32.4%;
      box-sizing: border-box;
      border-image: url('img/box.png') 16 8 8 8;
      border-top: 16px solid;
      border-right: 8px solid;
      border-bottom: 8px solid;
      border-left: 8px solid;
      padding: 4px;
      background: white;
      margin-right: 3px;
      border-radius: 15px;
    }
    .part1 > div.selected {
      border-image: url('img/box_sel.png') 20 12 12 12;
      border-top: 20px solid;
      border-right: 12px solid;
      border-bottom: 12px solid;
      border-left: 12px solid;
      padding: 0;
      background: yellow;
    }
    .part1 > div img {
      width: 100%;
    }
    .part1 > img {
      width: 100%;
      margin-top: 10px;
    }

    .part2 {
      width: 100%;
      box-sizing: border-box;
      border-image: url('img/frame2.png') 183 55 17 55;
      border-top: 24.4vw solid;
      border-right: 7.07vw solid;
      border-bottom: 2.37vw solid;
      border-left: 7.07vw solid;
      margin-top: 10px;
    }
    .part2 > div {
      background-color: #FFC21C;
      padding: 3px 8px;
    }
    .part2 > div > div {
      background-color: #FFF7B0;
      padding: 8px 13px 8px 8px;
      border: 1px solid black;
      border-style: dashed;
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .part2 > div > div:last-child {
      margin-bottom: 0px;
    }
    .part2 > div > div * {
      display: inline-block;
      vertical-align: middle;
    }
    .part2 > div > div img {
      width: 54px;
    }
    .part2 > div > div div {
      color: black;
      margin-left: 5px;
    }
    .part2 > div > div div span {
      vertical-align: baseline;
    }
    .part2 > div > div a {
      color: white;
      text-decoration: none;
      outline: none;
      padding: 5px 8px;
      border-radius: 7px;
      background-color: #0076C0;
      float: right;
      margin-top: 13.5px;
    }
    .part2 > div > div::after {
      content: '';
      display: block;
      clear: both;
    }

    .part3 {
      width: 100%;
      box-sizing: border-box;
      border-image: url('img/frame3.png') 183 55 17 55;
      border-top: 24.4vw solid;
      border-right: 7.07vw solid;
      border-bottom: 2.37vw solid;
      border-left: 7.07vw solid;
      margin-top: 20px;
      color: black;
    }
    .part3 > div {
      background-color: #FFC21C;
      padding: 3px 8px;
    }
    .part3 > div > div {
      background-color: #FFF7B0;
      padding: 8px 13px 8px 8px;
      border: 1px solid black;
      border-style: dashed;
      border-radius: 10px;
    }
    .part3 > div > div > div {
      border-bottom: 1px solid #828179;
      border-style: dashed;
      border-top: none;
      border-left: none;
      border-right: none;
      line-height: 30px;
    }
    .part3 > div > div > div:last-child {
      border: none;
      padding-bottom: 0;
    }
    .part3 > div > div > div span:last-child {
      float: right;
    }
    .part3 > div > div > div::after {
      content: '';
      display: block;
      clear: both;
    }

    .fixed {
      position: fixed;
      top: 45%;
      right: 5px;
    }
    .fixed img {
      width: 15vw;
    }

    .overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .dialog {
      position: fixed;
      width: 89.88vw;
      height: 81.76vw;
      top: 50px;
      left: 5.06vw;
      background: url('img/dialog1.png') no-repeat;
      background-size: 100% auto;
    }
    .dialog div {
      position: relative;
      text-align: center;
      top: 23vw;
    }
    .dialog img.btn {
      position: absolute;
      width: 50vw;
      left: 19.94vw;
      bottom: 5vw;
    }
    .dialog img.close {
      position: absolute;
      width: 6vw;
      top: 2vw;
      right: 2vw;
    }
  </style>
</head>
<body>
  <div class="desc">
    <div>每天可抽1次奖，当天首次分享可再抽1次</div>
    <div>流量币、iphone 7 128GB天天任性送！</div>
  </div>
  <div class="part1">
    <div id="reward1"><img src="img/reward1.png" /></div><!--
    --><div id="reward2"><img src="img/reward2.png" /></div><!--
    --><div id="reward3"><img src="img/reward3.png" /></div>
    <br>
    <img id="btn_draw" src="img/chou0.png" />
  </div>
  <div class="part2">
    <div>
      <div>
        <img src="img/r1.png" />
        <div>
          <span>您共获得流量币</span><br>
          <span>数量：<span id="coin_amount">0</span>个</span>
        </div>
        <a id="redir_my" class="hidden" href="my.html">立即使用</a>
      </div>
      <div class="hidden">
        <img src="img/r2.png" />
        <div>
          <span>iPhone 7 手机</span><br>
          <span>数量：1部</span>
        </div>
      </div>
    </div>
  </div>
  <div class="part3">
    <div>
      <div>
        <div>
          <span>186****8888</span>
          <span>iPhone 7：1部</span>
        </div>
        <div>
          <span>186****8888</span>
          <span>数量：10000个</span>
        </div>
        <div>
          <span>186****8888</span>
          <span>iPhone 7：1部</span>
        </div>
        <div>
          <span>186****8888</span>
          <span>数量：10000个</span>
        </div>
      </div>
    </div>
  </div>
  <div class="fixed">
    <a href="rule.html"><img src="img/btn_rule.png" /></a><br>
    <a href="#"><img src="img/btn_share.png" /></a>
  </div>
  <div class="overlay hidden"></div>
  <div class="dialog hidden">
    <div>text<br>t</div>
    <img class="btn" src="img/dialog_retry.png" />
    <img class="close" src="img/close.png" />
  </div>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script>
    var drawTimes = 0;
    var hasShare = false;
    var aniQue = delay(function(){}, 0);

    function delay(fn, t) {
      var queue = [], self, timer;
      function schedule(fn, t) {
        timer = setTimeout(function() {
          timer = null;
          fn();
          if (queue.length) {
            var next = queue.shift();
            schedule(next.fn, next.t);
          }
        }, t);
      }
      self = {
        delay: function(fn, t) {
          if (queue.length || timer) {
            queue.push({fn: fn, t: t});
          } else {
            schedule(fn, t);
          }
          return self;
        },
        cancel: function() {
          clearTimeout(timer);
          queue = [];
        }
      }
      return self.delay(fn, t);
    }
    function setDrawBtn(times) {
      $("#btn_draw").attr('src', 'img/chou' + (hasShare && times == 1 ? 0 : times) + '.png');
    }
    function getCoinAmount() {
      return +$("#coin_amount").html();
    }
    function setCoinAmount(amount) {
      $("#coin_amount").html(amount);
      $("#redir_my").removeClass('hidden');
    }
    function showIPhoneReward() {
      $(".part2 > div > div.hidden").removeClass('hidden');
    }
    function showDialog(reward, amount, times, error) {
      if (error) {
        $('.dialog img.btn')[0].onclick = function() {
          $('.close').click();
        };
      } else {
        $('.dialog img.btn')[0].onclick = function() {
          // todo: 分享
          hasShare = true;
          setDrawBtn(drawTimes);
          $('.close').click();
        };
      }

      if (error) {
        $('.dialog').css('background-image', "url('img/dialog4.png')");
        $('.dialog img.btn').attr('src', 'img/dialog_retry.png');
        $('.dialog > div').html('');
        $('.dialog').removeClass('hidden');
        $('.overlay').removeClass('hidden');
        return;
      }
      var text = reward == 2
        ? "恭喜您获得iPhone一部！<br>请保持手机通畅，客服将于7天内与你联系"
        : reward == 1
          ? "恭喜您获得" + amount + "流量币<br>请在“我”页面点击“账户明细”查看<br>流量币可以充值、选购商品哦"
          : "阿哦，手气有待提高<br>也许明天有惊喜！";         
      $('.dialog').css('background-image', "url('img/dialog" + reward + ".png')");
      $('.dialog img.btn').attr('src', 'img/dialog_btn' + times + '.png');
      $('.dialog > div').html(text);
      $('.dialog').removeClass('hidden');
      $('.overlay').removeClass('hidden');
    }
    function draw(idx, param2) {
      var sel = 0;
      var interval = 100;
      var count = 0;

      function loop() {
        sel++;
        count++;
        interval = Math.floor(count / 2) * 100;

        if (sel > 3) sel = 1;

        $('div[id^=reward').removeClass('selected');
        $('#reward' + sel).addClass('selected');

        if (interval > 500 && idx == sel) {
          aniQue.delay(function() {
            showResult(idx, param2);
          }, 500);
        } else {
          aniQue.delay(function() {
            loop();
          }, interval);
        }
      }
      aniQue.delay(function() {
        loop();
      }, 100);
    }
    function showResult(idx, param2) {
      switch (idx) {
        case 1:
          showDialog(1, param2 || 100, drawTimes);
          setCoinAmount(getCoinAmount() + 100);
          setDrawBtn(drawTimes);
          break;
        case 2:
          showDialog(2, 1, drawTimes);
          showIPhoneReward();
          setDrawBtn(drawTimes);
          break;
        case 3:
          showDialog(3, null, drawTimes);
          setDrawBtn(drawTimes);
          break;
      }
    }

    $('.close').click(function() {
      $('.dialog').addClass('hidden');
      $('.overlay').addClass('hidden');
    });
    $('#btn_draw').click(function() {
      if (drawTimes == 1 && !hasShare) {
        // todo: 分享
        hasShare = true;
      }
      else if (drawTimes == 2) {
        // todo: 分享
        return;
      }
      
      var result = Math.floor(Math.random() * 4); // 随机抽，0-失败，1-流量币，2-iphone，3-未中
      if (result == 0) {
        showDialog(null, null, null, true);
        setDrawBtn(drawTimes);
      } else {
        drawTimes++;
        draw(result);
      }
    });
  </script>
</body>
</html>